<mat-progress-bar *ngIf="loading && firstLoad"
                  mode="indeterminate">
</mat-progress-bar>
<div class="omv-dashboard-widget-chart"
     fxLayout="row">
  <div class="chart"
       [fxFlex]="chartWidth">
    <div *ngIf="config.chart.displayValue && data && chart && chartCtx"
         class="gauge-label"
         fxFlexFill
         fxLayout="column"
         fxLayoutAlign="end center">
      <span class="value">{{ labelFormatter(getMaxValue(), chartCtx) }}</span>
    </div>
    <canvas #chartCtx
            [style]="{'max-height': config.chart.maxHeight, 'max-width': config.chart.maxWidth}">
      {{ chart }}
    </canvas>
  </div>
  <ng-container [ngTemplateOutlet]="renderChartLegend"></ng-container>
</div>

<ng-template #renderChartLegend>
  <ng-container [ngSwitch]="config.chart.type">
    <ng-template [ngSwitchCase]="'advanced-doughnut'">
      <div *ngIf="data && chart && chartCtx"
           class="advanced-label"
           fxFlex="50"
           fxLayout="column"
           fxLayoutAlign="end start">
        <div class="total">
          <div class="total-value omv-text-truncate">{{ labelFormatter(getTotal(), chartCtx) }}</div>
          <div class="total-label omv-text-truncate"
               translate>Total</div>
        </div>
        <div class="items"
             gdGap="8px"
             gdColumns="repeat(2, 1fr)">
          <div *ngFor="let item of config.chart.dataConfig"
               [ngStyle]="{'border-left-color': item.backgroundColor}"
               class="item"
               fxLayout="column"
               fxLayoutAlign="start start">
            <div class="item-value omv-text-truncate">{{ labelFormatterByProp(data, item.prop, chartCtx) }}</div>
            <div class="item-percent">{{ calcPercent(item, chartCtx) }}%</div>
            <div class="item-label omv-text-truncate">{{ item.label }}</div>
          </div>
        </div>
      </div>
    </ng-template>

    <ng-template [ngSwitchCase]="'advanced-gauge'">
      <div *ngIf="data && chart && chartCtx"
           class="advanced-label"
           fxFlex="50"
           fxLayout="column"
           fxLayoutAlign="end start">
        <div class="items"
             gdGap="8px"
             gdColumns="repeat(3, 1fr)">
          <div *ngFor="let item of config.chart.dataConfig"
               [ngStyle]="{'border-left-color': item.backgroundColor}"
               class="item"
               fxLayout="column"
               fxLayoutAlign="start start">
            <div class="item-value omv-text-truncate">{{ labelFormatterByProp(data, item.prop, chartCtx) }}</div>
            <div class="item-label omv-text-truncate">{{ item.label }}</div>
          </div>
        </div>
      </div>
    </ng-template>
  </ng-container>
</ng-template>
